<template>
	<hr class="two" />

	<h2>==== WatchRef ===</h2>
	<div>
		<p>当前求和为:{{ sum }}</p>
		<button @click="sum++">点我加一</button>
	</div>

	<h4>当前的信息为:{{ msg }}</h4>
	<button @click="msg += '!'">修改信息</button>
	<hr />
	<h4>姓名:{{ person.name }}</h4>
	<h4>年龄:{{ person.age }}</h4>
	<h4>薪资:{{ person.job.j1.salary }}K</h4>
	<button @click="person.name = person.name + '~'">修改姓名</button>
	<button @click="person.age++">增长年龄</button>
	<button @click="person.job.j1.salary++">增长薪资</button>
</template>

<script>
import {ref, watch} from 'vue';

export default {
	name: 'WatchRef',
	setup() {

		let sum = ref(0);
		let msg = ref('你好');
		let person = ref({
			name: '张三',
			age: 18,
			job: {
				j1: {
					salary: 20
				}
			}
		});

		// 不能直接监测的一 个值 (针对简单数据类型的 RefImpl）， 其.value 只是一个简单数据
		//情况一: 监测的不是一个值，而是一个保存值的 RefImpl 结构(不能写成sum.value) 不能监视一个具体的值注意
		watch(sum, (nv, ov) => {
			console.log('WatchRef  watch(sum):',nv, ov, sum);
		}, {
			immediate: true //刚开始就监视数据
		});

		//情况二: 监视多个值， 封装在同一个数组
		watch([sum, msg], (nv, ov) => {
			console.log('sum / msg 发生改变了', nv, ov);
		});

		//person是RefImpl ，内存地址是否变化
		//开启深度监视不会存在问题
		/*
				watch(person, (nv, ov) => {
					console.log(nv, ov);
				}, {
					deep: true //必须开启，否则无法监视到
				});
		*/

		//这里如果不是person.value则会出现问题 因为person是一个RefImpl(默认没开启深度监视)
		//但是person.value是一个借助了proxy生成的reactive响应式对象 所以这里可以解决问题
		watch(person.value, (nv, ov) => {
			console.log(nv, ov);
		});


		//返回一个对象
		return {
			sum,
			msg,
			person
		}
	}
}
</script>

<style>
</style>
